<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-demo__dhoutdorsportinfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.id" placeholder="请输入活动编号进行查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getDataList()"></el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column prop="id" label="户外运动编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sportName" label="运动名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="number" label="已报名人数" header-align="center" align="center"></el-table-column>
        <el-table-column prop="upper" label="上限人数" header-align="center" align="center"></el-table-column>
        <el-table-column label="活动地址及其他信息" fixed="right" header-align="center" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="viewMoreSportInfo(scope.row.id)">查看活动信息</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="250">
          <template slot-scope="scope">
            <el-button type="success" size="small"
                       @click="apply(scope.row.id,scope.row.number,scope.row.upper,scope.row.startTime)"
                       v-if="TL(scope.row.endTime)">报名
            </el-button>
            <el-button type="primary" size="small" @click="cancel(scope.row.id,scope.row.startTime)"
                       v-if="TL(scope.row.endTime)">
              取消报名
            </el-button>
            <el-button type="danger" size="small" v-if="!(TL(scope.row.endTime))">
              活动已过期
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!--查看活动信息弹出框-->
      <el-dialog :visible.sync="moreSportInfoDialogVisible" title="活动地址及其他" width="30%">
        <el-form :model="moreSportInfo" :label-width="'120px'">
          <el-form-item label="活动地址" prop="sportAddress">
            <el-input v-model="moreSportInfo.sportAddress"></el-input>
          </el-form-item>
          <el-form-item label="组织人" prop="sportLeader">
            <el-input v-model="moreSportInfo.sportLeader"></el-input>
          </el-form-item>
          <el-form-item label="交通方式" prop="sportTraffic">
            <el-input v-model="moreSportInfo.sportTraffic"></el-input>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button type="danger" @click="moreSportInfoDialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dhoutdorsportinfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/dhoutdorsportinfo/page',
        getDataListIsPage: true,
        exportURL: '/demo/dhoutdorsportinfo/export',
        deleteURL: '/demo/dhoutdorsportinfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      NowTime: '',
      NowTimeAddOneHour: '',
      moreSportInfo: {
        sportAddress: '',
        sportLeader: '',
        sportTraffic: ''
      },
      moreSportInfoDialogVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    /**
     * 获取当前系统时间
     */
    getCurrentTime() {
      let nowTime = new Date(),
          year = nowTime.getFullYear(),
          month = nowTime.getMonth() + 1 >= 10 ? nowTime.getMonth() + 1 : '0' + (nowTime.getMonth() + 1),
          day = nowTime.getDate() >= 10 ? nowTime.getDate() : '0' + nowTime.getDate(),
          hours = nowTime.getHours() >= 10 ? nowTime.getHours() : '0' + nowTime.getHours(),
          minute = nowTime.getMinutes() >= 10 ? nowTime.getMinutes() : '0' + nowTime.getMinutes(),
          second = nowTime.getSeconds() >= 10 ? nowTime.getSeconds() : '0' + nowTime.getSeconds(),
          currentTime = "";
      currentTime = year + '-' + month + '-' + day + " " + hours + ":" + minute + ":" + second;
      this.NowTime = currentTime;
    },
    /**
     * 获取当前系统时间，并在小时位增加一小时
     */
    getCurrentTimeAddOneHour() {
      let nowTime = new Date(),
          year = nowTime.getFullYear(),
          month = nowTime.getMonth() + 1 >= 10 ? nowTime.getMonth() + 1 : '0' + (nowTime.getMonth() + 1),
          day = nowTime.getDate() >= 10 ? nowTime.getDate() : '0' + nowTime.getDate(),
          hours = nowTime.getHours() >= 9 ? (nowTime.getHours() + 1) : '0' + (nowTime.getHours() + 1),
          minute = nowTime.getMinutes() >= 10 ? nowTime.getMinutes() : '0' + nowTime.getMinutes(),
          second = nowTime.getSeconds() >= 10 ? nowTime.getSeconds() : '0' + nowTime.getSeconds(),
          currentTime = "";
      currentTime = year + '-' + month + '-' + day + " " + hours + ":" + minute + ":" + second;
      this.NowTimeAddOneHour = currentTime;
    },
    /**
     * 活动报名
     * @param id
     * @param number
     * @param upper
     * @param startTime
     */
    apply(id, number, upper, startTime) {
      this.getCurrentTime();
      if ((number < upper) && (this.NowTime < startTime)) {
        this.$confirm('确认报名此户外项目？报名后请在活动开始前五分钟到达指定场地。如无法参加活动，请在活动开始一小时之前申请取消报名，否则将无法取消报名。', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('demo/dhoutdorsportinfo/sportApply', {
            sportId: id,
            userId: this.$store.state.user.id
          })
              .then(({data: res}) => {
                if (res.data === 0) {
                  this.query();
                  this.$message({
                    type: 'success',
                    message: '报名成功！请按时参加活动。'
                  })
                } else if (res.data === 1) {
                  this.query();
                  this.$message({
                    type: 'error',
                    message: '请勿重复报名！'
                  })
                }
              })
        })
      } else if (number >= upper) {
        this.$message({
          type: 'error',
          message: '报名失败！活动人数已达上限。'
        })
      } else if (this.NowTime >= startTime) {
        this.$message({
          type: 'error',
          message: '报名失败！活动已经开始。'
        })
      }
    },
    /**
     * 取消报名
     * @param id
     * @param startTime
     */
    cancel(id, startTime) {
      this.getCurrentTimeAddOneHour();
      if (this.NowTimeAddOneHour > startTime) {
        this.$message({
          type: 'error',
          message: '取消报名失败。距离活动开始时间不足一小时或活动已经开始，无法取消报名。'
        })
      } else {
        this.$confirm('确认取消参加此户外项目？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('demo/dhoutdorsportinfo/sportApplyCancel', {
            sportId: id,
            userId: this.$store.state.user.id
          })
              .then(({data: res}) => {
                if (res.data === 0) {
                  this.query();
                  this.$message({
                    type: 'success',
                    message: '取消报名成功！'
                  })
                } else if (res.data === 1) {
                  this.query();
                  this.$message({
                    type: 'error',
                    message: '取消报名失败！请先报名活动。'
                  })
                }
              })
        })
      }
    },
    TL(endTime) {
      this.getCurrentTime();
      return this.NowTime <= endTime;
    },
    viewMoreSportInfo(sportId) {
      this.$http.get('demo/dhoutdorsportaddinfo/getSportAddInfo/' + sportId)
          .then(({data: res}) => {
            this.moreSportInfo.sportAddress = res.data.sportAddress;
            this.moreSportInfo.sportLeader = res.data.sportLeader;
            this.moreSportInfo.sportTraffic = res.data.sportTraffic;
            this.moreSportInfoDialogVisible = true;
          }).catch(_ => {
      })
    }
  }
}
</script>
